<template>
	<div class="copyright-content">
		<div id="copy_right_content">
			<div class="add-automatic-content">
				<div class="top-header">
					<div class="header-div-one" :class = "colorOne">1.选择作品</div>
					<div class="header-div-two" :class = "colorTwo">2.提交申请材料</div>
					<div class="header-div-three" :class = "colorThree">3.费用详情</div>
					<div class="header-div-four" :class = "colorFour">4.完成提交</div>
				</div>
				<div class="header_line">
					<span :class="header_line_one"></span>
					<span :class="header_line_two"></span>
					<span :class="header_line_three"></span>
					<span :class="header_line_four"></span>
				</div>
				<agencyOne v-if="automaticStatus === 'one'" @changestepstatus="changestepstatus"></agencyOne>
				<agencyTwo v-else-if="automaticStatus === 'two'" @changestepstatus="changestepstatus"></agencyTwo>
				<agencyThree v-else-if="automaticStatus === 'three'" @changestepstatus="changestepstatus"></agencyThree>
				<agencyFour v-else @changestepstatus="changestepstatus"></agencyFour>
				
			</div>
			
		</div>
	</div>
</template>

<script>
	import agencyOne from "./agencyOne";
	import agencyTwo from "./agencyTwo";
	import agencyThree from "./agencyThree";
	import agencyFour from "./agencyFour";
	export default {
	  name: "copyRight",
	   components: {
		    agencyOne,
			agencyTwo,
			agencyThree,
			agencyFour
	  	},
	  data() {
	    return {
			// 顶部选中撞他
			automaticStatus:'one',
			colorOne:{
				headerColor:true,
			},
			colorTwo:{
				headerColor:false,
			},
			colorThree:{
				headerColor:false,
			},
			colorFour:{
				headerColor:false,
			},
			header_line_one:{
				header_line_one:true,
			},
			header_line_two:{
				header_line_two:false
			},
			header_line_three:{
				header_line_three:false,
			},
			header_line_four:{
				header_line_four:false,
			},
	    };
	  },
	  methods: {
	  	// 切换顶部状态
		changestepstatus(value){
			console.log("value="+value);
			if(value === 'two'){
				this.colorOne={
					headerColor:false,
				};
				this.colorTwo={
					headerColor:true,
				};
				this.colorThree={
					headerColor:false,
				};
				this.colorFour={
					headerColor:false,
				};
				this.header_line_one={
					header_line_one:false,
				};
				this.header_line_two={
					header_line_two:true
				};
				this.header_line_three={
					header_line_three:false,
				};
				this.header_line_four={
					header_line_four:false,
				};
			}else if(value === 'three'){
				this.colorOne={
					headerColor:false,
				};
				this.colorTwo={
					headerColor:false,
				};
				this.colorThree={
					headerColor:true,
				};
				this.colorFour={
					headerColor:false,
				};
				this.header_line_one={
					header_line_one:false,
				};
				this.header_line_two={
					header_line_two:false
				};
				this.header_line_three={
					header_line_three:true,
				};
				this.header_line_four={
					header_line_four:false,
				};
			}else if(value === 'four'){
				this.colorOne={
					headerColor:false,
				};
				this.colorTwo={
					headerColor:false,
				};
				this.colorThree={
					headerColor:false,
				};
				this.colorFour={
					headerColor:true,
				};
				this.header_line_one={
					header_line_one:false,
				};
				this.header_line_two={
					header_line_two:false
				};
				this.header_line_three={
					header_line_three:false,
				};
				this.header_line_four={
					header_line_four:true,
				};
			}else{
				this.colorOne={
					headerColor:true,
				};
				this.colorTwo={
					headerColor:false,
				};
				this.colorThree={
					headerColor:false,
				};
				this.colorFour={
					headerColor:false,
				};
				this.header_line_one={
					header_line_one:true,
				};
				this.header_line_two={
					header_line_two:false,
				};
				this.header_line_three={
					header_line_three:false,
				};
				this.header_line_four={
					header_line_four:false,
				};
			}
			this.automaticStatus = value;
		}
	  },
	
	  beforeMount: function() {
	    // console.log("47")
	  },
	  mounted: function() {
	    // console.log("7777777777")
	  },
	  
	};
</script>

<style scoped="scoped">
	@import '../copyRight.css';
	@import '../automaticAdd/automaticAdd.css';
	.cont_one .cont_one_view {
		width: 620px;
		margin: 0 auto;
	}
	.top-header{
		padding: 0 139px;
	}
	.header_line .header_line_one{
		left:98px
	}
	.header_line .header_line_two{
		left: 340px;
		margin: inherit;
	}
	.header_line .header_line_three{
		right: 350px;
	}
	.add-automatic-content{
		width: 1400px;
	}
</style>